<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="500px" :title="`${drawerProps.title}商品`">
    <!-- <el-descriptions :column="1" title="客户信息" border>
      <el-descriptions-item width="300" label="客户id">{{ drawerProps.row!.customId }}</el-descriptions-item>
    </el-descriptions> -->
    <p></p>
    <el-form
      ref="ruleFormRef"
      label-width="150px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
      ><el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="drawerProps.row!.goodsName" placeholder="请填写商品名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属二级分类ID" prop="setId">
        <el-input v-model="drawerProps.row!.setId" placeholder="请填写所属二级分类ID" clearable :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="计量单位" prop="measureUnit">
        <el-input v-model="drawerProps.row!.measureUnit" placeholder="请填写计量单位" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品原价" prop="goodsPrice">
        <el-input v-model="drawerProps.row!.goodsPrice" placeholder="请填写商品原价" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品折扣" prop="goodsDiscount">
        <el-input v-model="drawerProps.row!.goodsDiscount" placeholder="请填写商品折扣" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品成本" prop="goodsCost">
        <el-input v-model="drawerProps.row!.goodsCost" placeholder="请填写商品成本" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品型号" prop="goodsModel">
        <el-input v-model="drawerProps.row!.goodsModel" placeholder="请填写商品型号" clearable></el-input>
      </el-form-item>
      <el-form-item label="供应商名称" prop="vendorInfo.vendorName" style="display: flex; align-items: center">
        <el-input
          v-model="drawerProps.row!.vendorInfo!.vendorName"
          placeholder="请选择供应商"
          clearable
          style="flex: 1"
        ></el-input>
        <el-button type="primary" @click="openVendorDialog">选择供应商</el-button>
      </el-form-item>
      <el-form-item label="商品保质期限" prop="goodsShelfLife">
        <el-date-picker
          v-model="drawerProps.row!.goodsShelfLife"
          type="date"
          placeholder="请选择商品保质期限"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="可否退货" prop="optReturn">
        <el-select v-model="drawerProps.row!.optReturn" placeholder="请选择是否可退货" clearable default-first-option>
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="可否换货" prop="optReplace">
        <el-select v-model="drawerProps.row!.optReplace" placeholder="请选择是否可换货" clearable>
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品备注信息" prop="goodsRemark">
        <el-input v-model="drawerProps.row!.goodsRemark" placeholder="请填写商品备注信息" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确定</el-button>
    </template>
    <VendorDialog ref="vendorRef" @get-vendor="getVendor" />
  </el-drawer>
</template>

<script setup lang="tsx" name="UserDrawer">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { Good, Vendor } from "@/api/interface";
import VendorDialog from "./VendorDialog.vue";
import { editGoods } from "@/api/modules/good";
//import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

const rules = reactive({
  goodsName: [{ required: true, message: "请填写商品名称" }],
  setId: [{ required: true, message: "请填写所属二级分类ID" }],
  measureUnit: [{ required: true, message: "请填写计量单位" }],
  goodsPrice: [{ required: true, message: "请填写商品原价" }],
  goodsDiscount: [{ required: true, message: "请填写商品折扣" }],
  goodsCost: [{ required: true, message: "请填写商品成本" }],
  goodsModel: [{ required: true, message: "请填写商品型号" }],
  "vendorInfo.vendorId": [{ required: true, message: "请填写供应商ID" }],
  "vendorInfo.vendorName": [{ required: true, message: "请填写供应商名称" }],
  goodsShelfLife: [{ required: true, message: "请选择商品保质期限" }],
  optReturn: [{ required: true, message: "请填写是否可退货" }],
  optReplace: [{ required: true, message: "请填写是否可换货" }],
  goodsRemark: [{ required: true, message: "请填写商品备注信息" }]
});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<Good.ResGoodsEntity>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {
    goodsName: "",
    setId: 0,
    measureUnit: "",
    goodsPrice: 0,
    goodsDiscount: 0,
    goodsCost: 0,
    goodsModel: "",
    vendorInfo: {
      vendorId: -1,
      vendorName: ""
    },
    goodsShelfLife: new Date(),
    optReturn: 1,
    optReplace: 1,
    goodsRemark: ""
  }
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await editGoods(drawerProps.value.row);
      ElMessage.success({ message: `修改商品信息成功！` });
      drawerVisible.value = false;
      drawerProps.value.getTableList!();
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});

const vendorRef = ref<InstanceType<typeof VendorDialog> | null>(null);
const openVendorDialog = () => {
  console.log(1324234234234231);
  vendorRef.value?.open();
};

const getVendor = (row: Vendor.ReqVendorList) => {
  if (drawerProps.value.row?.vendorInfo) {
    drawerProps.value.row.vendorInfo.vendorId = row.vendorId;
    drawerProps.value.row.vendorInfo.vendorName = row.vendorName;
  }
};
</script>
